<template>
  <div class="bf-commont-template relative">
    <div class="left-tabs shadow-r ">
      <div class="text-c padding-t user-profile">
        <!-- 头像 -->
        <img v-if="employeeData.sex == '1'" src="../../../../../assets/beneform4j/roster_image_boy.png" alt="">
        <img v-if="employeeData.sex == '2'" src="../../../../../assets/beneform4j/roster_image_girl.png" alt="">
      </div>
      <div class="text-c  padding-t emp-username">
       <span>{{employeeData.employeeName}}<span class="emp-status">({{employeeStatusName(employeeData.employeeStatus)}})</span></span>
       <!-- <span class="emp-status">({{employeeData.employeeStatus}})</span> -->
      </div>
      <div class="text-c padding-t  font-s">
        <span v-params="{code:'POST', id: employeeData.position}"></span>
      </div>
      <div class="padding-b border-b  clearfix margin-l margin-r margin-t top-left-remarks">
        <div class="float-l error font-s"><img src="../../../../../assets/beneform4j/roster/roster_icon_risk.png" alt=""><span>风险提醒</span></div>
        <div class="float-r color font-s"><img src="../../../../../assets/beneform4j/roster/roster_icon_remarks.png" alt=""><span>备注</span></div>
      </div>
      <div class="component-tabs">
        <div @click="tabsActive = 1" :class="tabsActive == 1?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_information.png" alt=""> 在职信息</div>
        <div @click="tabsActive = 2" :class="tabsActive == 2?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_personal.png" alt="">个人信息</div>
        <div @click="tabsActive = 3" :class="tabsActive == 3?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_contact.png" alt="">联系信息</div>
        <div @click="tabsActive = 4" :class="tabsActive == 4?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_money.png" alt="">工资社保</div>
        <div @click="tabsActive = 5" :class="tabsActive == 5?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_contract.png" alt="">合同信息</div>
        <div @click="tabsActive = 6" :class="tabsActive == 6?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_material.png" alt="">材料附件</div>
        <div @click="tabsActive = 7" :class="tabsActive == 7?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_record.png" alt="">异动记录</div>
        <div @click="tabsActive = 8" :class="tabsActive == 8?'tab-active':''"><img src="../../../../../assets/beneform4j/roster/roster_icon_operation.png" alt="">操作记录</div>
      </div>
    </div>
    <div class="right-content ">
      <div class="content-top-action">
        <el-dropdown>
          <el-button type="primary">
            打印<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>打印员工详情</el-dropdown-item>
            <el-dropdown-item>打印身份证原件</el-dropdown-item>
            <el-dropdown-item>打印入职登记表</el-dropdown-item>
            <el-dropdown-item>打印员工信息表</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button plain v-alert="'导出功能正在开发中,敬请期待'">导出</el-button>
        <!-- <el-button type="primary" plain @click="emTransaction">人事异动</el-button> -->
      </div>

      <!-- 各个详情组件 -->
      <div class="margin-t content">
        <div v-if="tabsActive == 1">
          <jobinfo :employeeData="employeeData"></jobinfo>
        </div>
        <div v-if="tabsActive == 2">
          <personinfo :employeeData="employeeData"></personinfo>
        </div>
        <div v-if="tabsActive == 3">
          <contactinfo :employeeData="employeeData"></contactinfo>
        </div>
        <div v-if="tabsActive == 4">
          <salary :employeeData="employeeData"></salary>
        </div>
        <div v-if="tabsActive == 5">
          <contract :employeeData="employeeData"></contract>
        </div>
        <div v-if="tabsActive == 6">
          <attachment :employeeData="employeeData"></attachment>
        </div>
        <div v-if="tabsActive == 7">
          <changelog :employeeData="employeeData"></changelog>
        </div>
        <div v-if="tabsActive == 8">
          <operlog :employeeData="employeeData"></operlog>
        </div>
      </div>
    </div>

    <bf-table-edit :editRules="turnoverFormRules" :editForm ='changeRosterForm' ref='changeRosterRef' @formSubmit='changeRosterSubmit'></bf-table-edit>
  </div>
</template>

<script>
import jobinfo from './morefunc/jobinfo'
import personinfo from './morefunc/personinfo'
import contactinfo from './morefunc/contactinfo'
import salary from './morefunc/salary'
import contract from './morefunc/contract'
import attachment from './morefunc/attachment'
import changelog from './morefunc/changelog'
import operlog from './morefunc/operlog'
import { getEmployeeInfoApi } from './api.js'
import { turnoverFormRules } from './table.rule'
import { changeRosterForm } from './table.form'
export default {
  components: {
    jobinfo,
    personinfo,
    contactinfo,
    salary,
    contract,
    attachment,
    changelog,
    operlog
  },
  data() {
    return {
      turnoverFormRules: turnoverFormRules,
      changeRosterForm: changeRosterForm,
      employeeNo: '',
      employeeData: {},
      tabsActive: 0,
    }
  },
  mounted: function() {
    let employeeNo = this.$route.query.id

    if (!employeeNo) {
      employeeNo = sessionStorage.getItem('roster_morefunc_info')
    } else {
      sessionStorage.setItem('roster_morefunc_info',employeeNo)
    }
    this.employeeNo = employeeNo
    if (!employeeNo) { // 当没有id 时，返回到主页面
      this.$router.push(
        {
          path: '/0302/030201'
        }
      )
      return
    }
    this.employeeNo = employeeNo
    this.getEmployeeInfo(employeeNo)
  },
  methods: {
    getEmployeeInfo(employeeNo) {
      getEmployeeInfoApi(employeeNo).then((response) => {
        // console.log(response)
        this.employeeData = response.data
        this.tabsActive = 1
      })
    },
    emTransaction() {
      // 人事异动
      this.$refs.changeRosterRef.show(this.employeeData)
    },
    changeRosterSubmit(form) {
      // console.log(form)
    },
    employeeStatusName(status) {
      if (status == 'u' || status == 'v' || status == 'w' || status == 'x' || status == 'y' || status == 'z' ) {
        return '入职审批中'
      }
      if (status == 'u' || status == 'v' || status == 'w' || status == 'x' || status == 'y' || status == 'z' ) {
        return '入职审批中'
      }
      if (status == '0') {
        return '试用期'
      }
      if (status == '1') {
        return '转正审批中'
      }

      if (status == '2' || status == '3' ) {
        return '异动审批中'
      }
      if (status == '4'  ) {
        return '试用延期审批'
      }
      if (status == '5') {
        return '试用离职审批'
      }
      if (status == '6') {
        return '待离职'
      }
      if (status == '7') {
        return '离职审批中'
      }
      if (status == '8') {
        return '待离职'
      }
      if (status == '9') {
        return '在职'
      }
      if (status == 'd') {
        return '已离职'
      }
    }
  }
}
</script>

<style scoped>
.tab-top>div{
  float: left;
  width: 12.5%;
  cursor: pointer;
  text-align: center;
}
.content{
  margin: 0 20px;
  margin-top: 20px;
}

.left-tabs{
  width: 180px;
  position: absolute;
}
.right-content{
  margin-left: 180px;
}
.emp-username{
  font-size: 14px;
  font-weight: bold;
}
.component-tabs{
  text-align: center;
}
.component-tabs>div{
  padding: 14px 0;
  cursor: pointer;
  margin-left: 16px;
  border-right: 3px solid #fff;
}
.component-tabs .tab-active{
  background-color: #f8f8f8;
  border-right: 3px solid #0099ff;
}
.component-tabs img{
  width: 16px;
  position: relative;
  top: 2px;
  right: 10px;
}
.top-left-remarks{
  padding-bottom: 20px;
  margin-top: 30px;
}
.top-left-remarks img{
  padding-right: 4px;
  position: relative;
  top: 1px;
}
.component-tabs{
  padding-top: 20px;
}
.user-profile{
  padding-top: 20px;
}
.content-top-action{
  padding-top: 20px;
  padding-left: 20px;
}
.emp-username .emp-status{
  font-size: 12px;
  padding-left: 4px;
  color: #aaa;
}
</style>
